<template>
    <div
        :class="{
            'left-scroll-container': type === 'left',
            'right-scroll-container': type === 'right',
        }"
    >
        <ElAutoResizer
            :style="{
                width: '100%',
                height: '100%',
            }"
        >
            <template #default="{ height, width }">
                <ElScrollbar style="width: 100%; height: 100%; padding-right: 8px" always>
                    <div
                        class="scroll-content"
                        :style="{
                            height: height > minHeight ? `${height}px` : `${minHeight}px`,
                            width: `${width - 8}px`,
                        }"
                    >
                        <!-- 传入的width 目前为 880px 高度最小值为 928 -->
                        <slot
                            :width="width - 8"
                            :height="height > minHeight ? height : minHeight"
                        ></slot>
                    </div>
                </ElScrollbar>
            </template>
        </ElAutoResizer>
    </div>
</template>

<script setup lang="ts">
// props 定义
defineProps<{
    type: 'left' | 'right'
}>()

// 最小高度为设计稿的1080 - 112 - 40 = 928
const minHeight = 928
</script>

<style lang="scss" scoped>
.left-scroll-container,
.right-scroll-container {
    position: absolute;
    top: 112px;
    bottom: 40px;
    z-index: 4;
    width: 848px;
    height: calc(100vh - 112px - 40px);
}

.left-scroll-container {
    left: 56px;
}

.right-scroll-container {
    right: 56px;
}
</style>
